<template>
    <el-menu :default-active="menu.activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
        @select="handleSelect">
        <template v-for="menu in menu.routes" :key="menu.path">
            <el-sub-menu :index="menu.path" v-if="menu.children && menu.children.length">
                <template #title>
                    {{ menu.meta.name }}
                </template>
                <template v-for="item in menu.children" :key="item.path">
                    <el-menu-item :index="item.path" @click="navto(item)">
                        {{ item.meta.name }}
                    </el-menu-item>
                </template>
            </el-sub-menu>
            <el-menu-item :index="menu.path" @click="navto(menu)" v-else-if="!menu.meta.hidden">
                {{ menu.meta.name }}
            </el-menu-item>
        </template>
    </el-menu>
</template>
    
<script>
// import { useRouter } from 'vue-router'
import router from '../../router/index'
import { useMenu } from '../../store/menu'
import { useMenu2 } from '../../store/menu2'
import { useMenu3 } from '../../store/menu3'
import { useMenu4 } from '../../store/menu4'
import { useMenu5 } from '../../store/menu5'
export default {

    name: 'TopNavigation',
    components: {
    },
    props: {
        routerIndex: Number
    },
    data() {
        return {
            menu: useMenu()
        }
    },
    mounted() {
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath)
        },
        navto(item) {
            // const router = useRouter()
            router.push(item.path)
            this.menu.activeIndex = item.path
        }
    },
    watch: {
        routerIndex() {
            switch (this.routerIndex) {
                case 0: this.menu = useMenu(); break;
                case 1: this.menu = useMenu2(); break;
                case 2: this.menu = useMenu3(); break;
                case 3: this.menu = useMenu4(); break;
                case 4: this.menu = useMenu5(); break;
            }
        }
    },
    computed: {
    },
}
</script>
    
<style scoped>
::v-deep(.el-menu-item) {
    border-right: 2px solid #dbdbdb;
    max-width: 185px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    line-height: 25px;
    padding: 0 10px;
    font-size: 13px;
}

.el-menu-demo {
    border-bottom: none;
    height: 30px;
    background-color: rgb(235, 237, 238);
    padding: 3px 15px;
}
</style>